@import '~@kdcloudjs/kdesign/dist/kdesign-complete.less';

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.newsHandle {
  position: relative;
  cursor: pointer;

  .icon {
    font-size: 20px;
  }

  .count {
    position: absolute;
    top: 10px;
    left: 4px;
    padding: 1px 4px;
    color: #fff;
    line-height: 16px;
    font-style: normal;
    font-size: 10px;
    text-align: center;
    border-radius: 12px;
    transform: scale(0.625);
    background-color: #ff5257;
  }
}

.news {
  &.visible {
    .mask {
      pointer-events: auto;
      transition-timing-function: ease-in;
    }

    .bar {
      transform: translateX(0);
      transition-timing-function: ease-in;
    }
  }

  .mask {
    z-index: 100;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    pointer-events: none;
    transition: opacity 0.2s ease-out;
  }

  .bar {
    z-index: 101;
    position: fixed;
    top: 53px;
    right: 0;
    bottom: 0;
    width: 320px;
    border-radius: 8px;
    background-color: #fff;
    transform: translateX(100%);
    transition: transform 0.2s ease-out;
    box-shadow: 0px 9px 24px 6px rgba(0, 0, 0, 0.1);

    .list {
      padding: 8px 0;

      .item {
        position: relative;
        padding: 12px 20px;
        transition: background-color 0.2s;

        &::after {
          position: absolute;
          right: 20px;
          bottom: -0.5px;
          left: 20px;
          height: 1px;
          content: '';
          background-color: #eff1f4;
        }

        &:hover {
          cursor: pointer;
          background-color: #f5f5f5;
        }

        .header {
          display: flex;
          margin-bottom: 8px;

          .title {
            margin-bottom: 0;
            flex: auto;
            font-size: 14px;
            color: #212121;
            line-height: 21px;
            .ellipsis;
          }

          .time {
            margin-left: 10px;
            font-size: 14px;
            color: #999;
            line-height: 21px;
            white-space: nowrap;
          }
        }

        .content {
          display: flex;
          font-size: 12px;
          color: #999;
          line-height: 18px;

          .code {
            flex: auto;
            .ellipsis;
          }

          .status {
            margin-left: 10px;
            color: @color-theme;
            white-space: nowrap;
          }

          .message {
            .ellipsis;
          }
        }
      }
    }

    .empty {
      margin-top: 140px;
    }

    .more {
      position: absolute;
      top: 0;
      right: 20px;
      line-height: 32px;
      font-size: 12px;
    }

    :global {
      .kd-tabs-tab-list {
        padding: 0 20px;
      }

      .kd-carousel-displaylist-item {
        box-sizing: border-box;
        width: 320px;
        overflow-y: auto;
      }
    }
  }
}
